android ios 原生pdf预览

插件 ID: 24905
来源: https://ext.dcloud.net.cn/plugin?id=24905
android ios 原生pdf预览 展示pdf

---

更新记录

                                                    1.0.4（2026-03-12）
                                                                                                                [
                                                            下载此版本
                                                        ](javascript:void(0))

优化

                                                    1.0.3（2025-09-13）
                                                                                                                [
                                                            下载此版本
                                                        ](javascript:void(0))

优化

                                                    1.0.1（2025-08-25）
                                                                                                                [
                                                            下载此版本
                                                        ](javascript:void(0))

初始化 查看更多

平台兼容性

uni-app(4.07)

| Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 | | | √ | √ |

• |
• | √ | √ | 5.0 | √ |
• | | | 微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 小红书小程序 | 快应用-华为 | 快应用-联盟 | | |
• |
• |
• |
• |
• |
• |
• |
• |
• |
• |
• |
• | |

uni-app x(4.07)

| Chrome | Safari | Android | iOS | 鸿蒙 | 微信小程序 | | |

• |
• | 5.0 | √ |
• |
• | |

xtf-pdfview

uniappx

<template>
    <view style="display: flex;flex: 1;">
        <text>{{page_info}}</text><button @click="toEnd()">跳转尾页</button>
        <xtf-pdfview style="width: 100%;height: 100%;" ref="pdf" @onViewLoad="onViewLoad" @OnPdfLoadComplete="OnPdfLoadComplete" ></xtf-pdfview>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                page_info:"",
                title: 'Hello'
            }
        },
        onLoad() {
        },
        methods: {
            onViewLoad(){
                console.log("onViewLoad")
                var pdf:XtfPdfviewElement=this.$refs["pdf"] as XtfPdfviewElement
                pdf.setPath("pdf.pdf")
            },
            OnPdfLoadComplete(){
                var pdf:XtfPdfviewElement=this.$refs["pdf"] as XtfPdfviewElement
                this.page_info=pdf.getCurrentPage()+"/"+pdf.getPageCount();
            },
            toEnd(){
                var pdf:XtfPdfviewElement=this.$refs["pdf"] as XtfPdfviewElement
                pdf.jumpTo(pdf.getPageCount()-1);
            }
        },
    }
</script>
<style>
    .logo {
        height: 100px;
        width: 100px;
        margin: 100px auto 25px auto;
    }
    .title {
        font-size: 18px;
        color: #8f8f94;
    text-align: center;
    }
</style>

uniapp nvue

<template>
    <view style="display: flex;flex: 1;">
        <text>{{page_info}}</text><button @click="toEnd()">跳转尾页</button>
        <xtf-pdfview style="width: 100%;height: 100%;" ref="pdf" @onViewLoad="onViewLoad" @OnPdfLoadComplete="OnPdfLoadComplete" ></xtf-pdfview>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                page_info:"",
                title: 'Hello'
            }
        },
        onLoad() {
        },
        methods: {
            onViewLoad(){
                console.log("onViewLoad")
                var pdf=this.$refs["pdf"];
                pdf.setPath("pdf.pdf")
            },
            OnPdfLoadComplete(){
                var pdf=this.$refs["pdf"];      
            this.page_info=pdf.getCurrentPage()+"/"+pdf.getPageCount();
            },
            toEnd(){
                var pdf=this.$refs["pdf"];
                pdf.jumpTo(pdf.getPageCount()-1);
            }
        },
    }
</script>
<style>
    .logo {
        height: 100px;
        width: 100px;
        margin: 100px auto 25px auto;
    }
    .title {
        font-size: 18px;
        color: #8f8f94;
    text-align: center;
    }
</style>

开发文档

UTS 语法UTS API插件UTS uni-app兼容模式组件UTS 标准模式组件Hello UTS